<template>
  <div id="views" class="upload_idcard">
    <div class="uploadArea">
      <p class="imgArea hoverhand" id="imgArea">
        <span class="idcardSrc">
          <img :src="idcardsrc" alt="身份证正面" :class="imgclass">
        </span>
        <input id="idcard" type="file" ref="idcardInput" @change="selectImgs(0)" accept="image/*" class="hoverhand" title="上传身份证正面">
      </p>
      <span class="reminder">
      请上传身份证正面
      </span>
    </div>
    <div class="uploadArea" style="margin-top: 0.27rem;">
      <p class="imgArea hoverhand" id="imgArea2">
        <span class="idcardSrc">
          <img :src="idcardsrc2" alt="身份证反面" :class="imgclass2">
        </span>
        <input id="idcard2" type="file" ref="idcardInput2" @change="selectImgs(1)" accept="image/*" class="hoverhand" title="上传身份证反面">
      </p>
      <span class="reminder">
      请上传身份证反面
      </span>
    </div>
    <button class="yellowbtn" id="nextStep" @click="nextStep">提交</button>
  </div>
</template>
<script>
  import { relNameVerify , file  } from '../../http/api';

  export default {
    name: 'upload_idcard',
    data() {
      return {
        introduce: '大陆上传身份证',
        imgScale: 1.658,/*默认图片宽/高比例*/
        imgclass: 'width100',
        imgclass2: 'width100',
        idcardsrc: require('../../common/imgs/idcardicon.png'),/*上传的身份证正面图片地址*/
        idcardsrc2: require('../../common/imgs/backidcard.png'),/*上传的身份证反面图片地址*/
        query: this.$route.query,//上个页面的参数
        getImgPath1:'',//上传图片得到的返回图片地址（正面）
        getImgPath2:'',//上传图片得到的返回图片地址（反面）
        base64img:'',//base64图片
        inputfile:'',//暂存文件file(上传后端)
      }
    },
    methods: {
      setImgStyle(type , url) {
        //设置显示图片样式
       //type判断是正面还是反面，0  1
        let thiz = this;
        let newimg = new Image();
        newimg.src = url;
        let imgcls = type == 0 ? 'imgclass' : 'imgclass2';
        this.loading();
        newimg.onload = function () {
          thiz.closeLoading();
          if (this.width / this.height > thiz.imgScale) {
            thiz[imgcls] = 'width100';
          } else {
            thiz[imgcls] = 'height100';
          }
        }
      },
      selectImgs(type) {
        //type判断是正面还是反面，0  1
        let thiz = this;
        let files = type == 0 ? this.$refs.idcardInput.files : this.$refs.idcardInput2.files;
        let inputfile = files[0];
        // console.log('files[0]',files[0]);
        require('../../common/js/compressImg').compressImg(inputfile).then(res =>{
          console.log('res',res);
          thiz.inputfile = res.inputFile;
          thiz.base64img = res.base64Img;
          thiz.uploadFile(type)
          // let fileSize = inputfile.size;/*上传文件的大小*/
          // if (fileSize > 2 * 1024 * 1024 ) {
          //   let toast = require('../../common/js/toast').toast;
          //   toast('图片不能大于2M ^_^');
          //   return;
          // }
          // let url;
          // if (typeof FileReader) {
          //   let fileReader = new FileReader();
          //   fileReader.onload = function (e) {
          //     thiz.base64img = fileReader.result;
          //     thiz.uploadFile(type)
          //   };
          //   fileReader.readAsDataURL(inputfile);
          // }
          // else if (window.createObjectURL !== undefined || window.URL || window.webkitURL) {
          //   if (window.createObjectURL !== undefined) { // basic
          //     url = window.createObjectURL(inputfile);
          //   } else if (window.URL !== undefined) { // mozilla(firefox)
          //     url = window.URL.createObjectURL(inputfile);
          //   } else if (window.webkitURL !== undefined) { // webkit or chrome
          //     url = window.webkitURL.createObjectURL(inputfile);
          //   }
          //   thiz.base64img = url;
          //   thiz.uploadFile(type)
          // }
        });
      },
      uploadFile( type ){
        //上传图片
        let thiz = this;
        let formdata = new FormData();
        formdata.append('img', thiz.inputfile);
        file(formdata).then( res => {
          if(res.code == 200){
            let imgurl =  res.data.files.url;
            let path = res.data.files.path;
            if( type == 0 ){
              thiz.getImgPath1 = path;
              thiz.idcardsrc = imgurl;
            } else {
              thiz.getImgPath2 = path;
              thiz.idcardsrc2 = imgurl;
            }
            thiz.setImgStyle(type , imgurl);
          }
        })
      },
      nextStep() {
        /*下一步*/
       let thiz = this;
        let toast = require('../../common/js/toast').toast;
       if( !thiz.getImgPath1 ){
         toast('请上传身份证正面照');
         return;
       }
       if( !thiz.getImgPath2 ){
         toast('请上传身份证反面照');
         return;
       }
       let params = {
          name: thiz.query.name,
          type:1,
          id_num: thiz.query.card,
          id_photo_1: thiz.getImgPath1,
          id_photo_2: thiz.getImgPath2
        };
        relNameVerify(params).then(res => {
          if (res.code == 200) {
            toast('实名审核提交成功');
            this.$router.replace({path : '/entrance'});
          }
        })
      }
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  .upload_idcard{
    padding:0.42rem 0.3rem;padding-bottom: 0.5rem;
    .uploadArea{
      background: #fff;border-radius: 0.04rem;overflow: hidden;text-align: center;
      .title{font-size: 0.32rem;text-align: center;padding: 0.34rem 0;}
      .imgArea{
        padding:0 1.21rem;font-size: 0;position: relative;padding-top: 18px;
        .idcardSrc{
          border-radius:0.04rem;height: 2.72rem;display: inline-block;width: 100%;position: relative;
          img{
            max-width: 100%;max-height: 100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
            position: relative;top:50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);
          }
        }
        input{opacity: 0;position: absolute;z-index: 1;width: calc( 100% - 2.42rem );left: 1.21rem;top:0;height: 100%;}
      }
      .reminder{
        padding:0;font-size: 0.32rem;text-align: center;display: inline-block;line-height: 55px;height: 55px;
      }
    }
  }
  #nextStep{margin-top: 0.42rem}
</style>
